<script setup lang="ts">
import { PlusIcon } from 'lucide-vue-next'
import { Button } from '@/registry/new-york-v4/ui/button'
import { ButtonGroup } from '@/registry/new-york-v4/ui/button-group'
</script>

<template>
  <div class="flex flex-col items-start gap-8">
    <ButtonGroup>
      <Button variant="outline" size="sm">
        Small
      </Button>
      <Button variant="outline" size="sm">
        Button
      </Button>
      <Button variant="outline" size="sm">
        Group
      </Button>
      <Button variant="outline" size="icon-sm">
        <PlusIcon />
      </Button>
    </ButtonGroup>
    <ButtonGroup>
      <Button variant="outline">
        Default
      </Button>
      <Button variant="outline">
        Button
      </Button>
      <Button variant="outline">
        Group
      </Button>
      <Button variant="outline">
        <PlusIcon />
      </Button>
    </ButtonGroup>
    <ButtonGroup>
      <Button variant="outline" size="lg">
        Large
      </Button>
      <Button variant="outline" size="lg">
        Button
      </Button>
      <Button variant="outline" size="lg">
        Group
      </Button>
      <Button variant="outline" size="icon-lg">
        <PlusIcon />
      </Button>
    </ButtonGroup>
  </div>
</template>
